<template>
	<view>
		<view id="mapContainer" :style="{height:'100vh',width: '100%'}" :prop="sender" :change:prop="handleAction">
		</view>
		<!-- 		<view id="mapDiv" :style="{height:'50vh',width: '100%'}" :prop="sender" :change:prop="handleAction">
		</view> -->
	</view>
</template>

<script module="leaflet" lang="renderjs">
	import '@/libs/leaflet/leaflet.css';
	import '@/libs/leaflet/Leaflet.markercluster/MarkerCluster.css';
	import '@/libs/leaflet/Leaflet.markercluster/MarkerCluster.Default.css';
	import L from '@/libs/leaflet/leaflet'
	import '@/libs/leaflet/leaflet.ChineseTmsProviders.js'
	import '@/libs/leaflet/leaflet.mapCorrection.js'
	import '@/libs/leaflet/terraformer'
	import Terraformer from '@/libs/leaflet/terraformer-wkt-parser'
	import '@/libs/leaflet/Leaflet.markercluster/leaflet.markercluster.js';
	import imgUrl from '@/static/marker-icon.png';

	export default {
		data() {
			return {
				map: null,
				ownerInstance: {},
				layers: [],
				baseLayers: [],
				cluster: null,
				settings: {
					keyTianDi: '7bed489c2c6c48024503bfeb4ef3e97f', //这里填写你自己的天地图 KEY
				}
			}
		},
		mounted() {
			this.handleCreate()
		},
		methods: {
			// 测试-----------

			// 测试-----------
			handleAction(newValue, oldValue, ownerInstance, instance) {

				this.ownerInstance = ownerInstance
				var handle = this[newValue.handle]
				var latlng = newValue.latlng
				var options = newValue.options
				var callback = newValue.callback
				var param = newValue.param
				if (!options) {
					options = undefined
				}
				if (!handle) {
					console.info('参数为标记需要执行的方法')
					return
				}
				//同时执行两次操作的时必须延迟执行否则数据变化太快导致没反应 
				this.handleExecute(handle, latlng, options, callback, param)
			},
			handleExecute(handle, latlng, options, callback, param) {
				var layer = handle(latlng, options)
				if (!layer) {
					return
				}
				if (options && options.popup) {
					layer.bindPopup(options.popup)
				}
				if (!callback) {
					return
				}
				layer.on('click', () => {
					this.ownerInstance.callMethod('handleItemClick', {
						callback,
						param
					})
				})
			},
			handleCreate(options) {
				this.map = L.map('mapContainer', {
					attributionControl: false,
					zoomControl: true,
					detectRetina: true,
					closeOnClick: true
				}).setView([38.05030536722234, 114.4634228084647], 10)
				var layer = this.handleInitializeLayer()
				layer.addTo(this.map)

				let cluster = new L.MarkerClusterGroup()
				this.cluster = cluster
				cluster.markers = []
				// console.log(this.markers)
				this.map.addLayer(cluster)
				this.handleCreateLayerControl()

				// 点聚合事件
				cluster.on('click', (e) => {
					this.clickLayerControl(e.layer.options)
				})
			},
			clickLayerControl(e) {
				// this.$emit('emitControl', e)
				this.$ownerInstance.callMethod('getdata', e);
			},
			handleInitializeLayer() {
				// 天地图底图
				var NormalImage = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
					key: this.settings.keyTianDi
				})
				//天地图注记
				var NormalCia = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
					key: this.settings.keyTianDi
				})
				// 天地图图组
				var NormaldiMap = L.layerGroup([NormalImage, NormalCia])

				// 卫星底图
				var SatelliteImage = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
					key: this.settings.keyTianDi
				})
				//卫星注记
				var SatelliteCia = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
					key: this.settings.keyTianDi
				})
				// 卫星图组
				var SatellitediMap = L.layerGroup([SatelliteImage, SatelliteCia])

				// 地形底图
				var TerrainImage = L.tileLayer.chinaProvider('TianDiTu.Terrain.Map', {
					key: this.settings.keyTianDi
				})
				//地形注记
				var TerrainCia = L.tileLayer.chinaProvider('TianDiTu.Terrain.Annotion', {
					key: this.settings.keyTianDi
				})
				// 地形图组
				var TerraindiMap = L.layerGroup([TerrainImage, TerrainCia])
				this.baseLayers.push({
					id: 1,
					label: '地图',
					layer: NormaldiMap
				})
				this.baseLayers.push({
					id: 2,
					label: '卫星',
					layer: SatelliteCia
				})
				this.baseLayers.push({
					id: 3,
					label: '地形',
					layer: TerraindiMap
				})
				return NormaldiMap
			},
			handleCreateLayerControl() {
				var obj = {}
				for (var i = 0; i < this.baseLayers.length; i++) {
					var item = this.baseLayers[i]
					obj[item.label] = item.layer
				}
				var control = L.control.layers(obj)
				control.addTo(this.map)
			},
			marker(latlng, options) {
				console.log('标记点', latlng);
				for (let i = 0; i < latlng.length; i++) {
					// 图标
					var myIcon = L.icon({
					    iconUrl: imgUrl,
					    iconSize: [20, 30],
					});
					// 内容
					var marker = L.marker(latlng[i], {icon: myIcon})
					marker.addTo(this.map)
					// 弹窗工具
					var point = L.point(0, -15);
					marker.bindTooltip(latlng[i].nickName, {
						direction: 'top',
						permanent: true,
						offset: point
					}).openTooltip();
					// 为标注添加点击事件监听器
					marker.on('click', (e) => {
						this.markPointFn(latlng[i])
					});

				}
				if (options && options.popup) {
					marker.bindPopup(options.popup)
				}
				this.layers.push(marker)
				return marker
			},
			// 标记点传值
			markPointFn(e) {
				// this.$emit('emitControl', e)
				this.$ownerInstance.callMethod('getPointFn', e);
			},
			markercluster(latlng, options) {
				console.log('点聚合', latlng, options);
				let list = new Array()
				if (!Array.isArray(latlng)) {
					list.push(latlng)
				} else {
					list = [...latlng]
				}
				list.forEach(obj => {
					var marker = L.marker(obj, obj)

					// 测试
					var titel = obj.id
					// 创建一个弹出窗口对象
					var point = L.point(0, -15);
					// marker.bindTooltip('设备编号:' + titel, {
					marker.bindTooltip(titel, {
						direction: 'top',
						permanent: true,
						offset: point
					}).openTooltip();
					if (options && options.popup) {
						marker.bindPopup(options.popup)
						console.log('半段IFFFFFFFFFFFF');
					}
					this.cluster.markers.push(marker)
					this.cluster.addLayer(marker)
				})
				if (list.length > 0) {
					this.map.panTo(list[0])
				}
			},

			polyline(latlngs, options) {
				var polyline = L.polyline(latlngs, options)
				polyline.addTo(this.map)
				if (options && options.popup) {
					polyline.bindPopup(options.popup)
				}
				this.layers.push(polyline)
				return polyline
			},
			lsyerWMS(baseUrl, options) {
				var layer = L.tileLayer.wms(baseUrl, options)
				layer.addTo(this.map)
				this.layers.push(layer)
				return layer
			},
			circle(latlng, options) {
				var circle = L.circle(latlng, options)
				circle.addTo(this.map)
				if (options && options.popup) {
					circle.bindPopup(options.popup)
				}
				this.layers.push(circle)
				return circle
			},
			geoJson(geojson, options) {
				var json = geojson
				if (typeof(geojson) == 'string') {
					json = Terraformer.parse(geojson)
				}
				var layer = L.geoJSON(json, options)
				layer.addTo(this.map)
				if (options && options.popup) {
					layer.bindPopup(options.popup)
				}
				this.layers.push(layer)
				return layer
			},
			panTo(latlng, options) {
				this.map.panTo(latlng, options)
			},
			flyTo(latlng, options) {
				this.map.flyTo(latlng, options)
			},
			fitBounds(bounds, options) {
				this.map.fitBounds(bounds, options)
			},
			flyBounds(bounds, options) {
				this.map.flyToBounds(bounds, options)
			},
			setZoom(zoom, options) {

				this.map.setZoom(zoom, options)
			},
			removeAll() {
				for (let i = 0; i < this.layers.length; i++) {
					let item = this.layers[i]
					item.remove()
				}
				let markers = [...this.cluster.markers]
				markers.forEach(obj => {
					this.cluster.removeLayer(obj)
				})
				this.cluster.markers = []
				// console.log(this.cluster)
				this.layers = new Array()
			}
		}
	}
</script>
<style>
	.div_icon {
		/* font-size: 300rpx; */
		/*background:red;*/
		/*width:5px;*/
		/* color: #aaff00; */
		width: 100rpx;
		height: 100rpx;
		background-color: #aaff00;
	}
</style>
<script>
	export default {
		data() {
			return {
				sender: {
					handle: '',
					latlng: {},
					options: null,
					callback: '',
					param: null
				},
				height: 300
			}
		},
		mounted() {

		},
		methods: {
			// 获取点聚合renderjs数据
			getPointFn(data) {
				this.$emit('emitControl', data)
			},
			// 获取点聚合renderjs数据
			getdata(data) {
				this.$emit('emitControl', data)
			},
			// 标记点
			handleMarker(latlng, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				this.sender = {
					handle: 'marker',
					latlng: latlng,
					options: options,
					callback,
					param
				}
				console.log('---', this.sender);
			},
			handleItemClick(event) {
				// #ifdef H5
				var handle = this.$parent.$parent[event.callback]
				//#endif
				// #ifdef APP-PLUS
				var handle = this.$parent[event.callback]
				//#endif
				if (handle) {
					handle(event.param)
				}
				// console.log(event)
			},
			handlePolyline(latlngs, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				this.sender.handle = 'polyline'
				this.sender.latlng = latlngs
				this.sender.options = options
				this.sender.callback = callback
				this.sender.param = param
			},
			handleLsyerWMS(baseUrl, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				this.sender.handle = 'lsyerWMS'
				this.sender.latlng = baseUrl
				this.sender.options = options
				this.sender.callback = callback
				this.sender.param = param
			},
			handleCircle(latlng, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				this.sender.handle = 'circle'
				this.sender.latlng = latlng
				this.sender.options = options
				this.sender.callback = callback
				this.sender.param = param
			},
			handleGeoJson(geojson, options, callback, param) {
				this.sender.handle = 'geoJson'
				this.sender.latlng = geojson
				this.sender.options = options
				this.sender.callback = callback
				this.sender.param = param
			},
			handlePanTo(latlng, options) {
				this.sender.handle = 'panTo'
				this.sender.latlng = latlng
				this.sender.options = options
			},
			handleFlyTo(latlng, options) {
				this.sender = {
					handle: 'flyTo',
					latlng: latlng,
					options: options
				}
			},
			handleFitBounds(bounds, options) {
				this.sender.handle = 'fitBounds'
				this.sender.latlng = bounds
				this.sender.options = options
			},
			handleFlyBounds(bounds, options) {
				this.sender.handle = 'flyBounds'
				this.sender.latlng = bounds
				this.sender.options = options
			},
			handleSetZoom(zoom, options) {
				this.sender.handle = 'setZoom'
				this.sender.latlng = zoom
				this.sender.options = options
			},
			handleRemoveAll() {
				this.sender.handle = 'removeAll'
				this.sender.latlng = null
				this.sender.options = null
			},
			handleMarkercluster(latlng, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = ''
				}
				// for (var i = 0; i < latlng.length; i++) {
				// 	var title = latlng[i].name + ''
				// 	let marker = L.marker(latlng[i], latlng[i])
				// 	//绑定点击弹窗事件
				// 	marker.bindPopup(title);
				// 	this.cluster.addLayer(marker)
				// }
				let sender = {
					handle: 'markercluster',
					latlng: latlng,
					options: options,
					callback,
					param
				}
				this.sender = sender
			}
		}

	}
</script>

<style lang="scss">

</style>